<template>
  <div>
    <div  id="g_top" class="m-top">&nbsp;</div>
    <div id="g_nav" class="m-subnav">&nbsp;</div>
    <!-- 检测模块 当来到这的歌单没有数据或需要登陆出现 -->
    <needLogin v-if="!loginFlag && !$store.state.userId"></needLogin>
    <div id="m-playlist" class="g-bd4 f-cb" v-if="loginFlag">
      <div class="g-mn4" v-if="viewFlag && playlist">
        <div class="g-wrap6">
          <!-- 头部部分 头像 简介.... -->
          <div class="m-info f-cb" id="auto-id-dJEM40G4UzhHVPx">
            <div class="cover u-cover u-cover-dj">
              <img
                :src="playlist ? playlist.coverImgUrl : null"
                alt="歌单封面"
              />
            </div>
            <div class="cnt">
              <div class="cntc">
                <div class="hd f-cb">
                  <i class="f-fl e-icn e-icn-13 f-pr"></i>
                  <div class="tit">
                    <h2 class="f-ff2 f-brk">
                      {{ playlist ? playlist.name : null }}
                    </h2>
                  </div>
                </div>
                <div class="user f-cb">
                  <a href="javascript:;" class="face">
                    <img
                      :src="playlist ? playlist.creator.avatarUrl : null"
                      alt="歌单作者头像"
                    />
                  </a>
                  <span class="name">
                    <a
                      href="javascript:;"
                      class="s-fc7"
                      @click.stop="toUser(playlist.creator.userId)"
                      >{{ playlist ? playlist.creator.nickname : null }}</a
                    >
                    <span class="time s-fc4"
                      >{{ playlist ? transfromDate : null }}&nbsp;创建</span
                    >
                  </span>
                </div>
                <div class="btns f-cb">
                  <a
                    href="javascript:;"
                    class="u-btn2 u-btn2-2 u-btni-addply f-fl"
                    @click.stop="send_song(playlist.id)"
                    ><i><em class="ply"></em> 播放</i></a
                  >
                  <a href="javascript:;" class="u-btni u-btni-fav"
                    ><i>({{ playlist ? playlist.subscribedCount : null }})</i>
                  </a>
                  <a href="javascript:;" class="u-btni u-btni-share"
                    ><i>({{ playlist ? playlist.shareCount : null }})</i></a
                  >
                  <a href="javascript:;" class="u-btni u-btni-dl"
                    ><i>下载</i></a
                  >
                  <a href="javascript:;" class="u-btni u-btni-cmmt"
                    ><i>({{ playlist ? playlist.commentCount : null }})</i></a
                  >
                </div>
                <div class="tags f-cb" v-if="playlist && playlist.tags.length">
                  <b>标签：</b>
                  <a
                    href="javascript:;"
                    class="u-tag"
                    v-for="(item, index) in playlist.tags"
                    :key="index"
                    ><i>{{ item }}</i></a
                  >
                </div>
                <p id="album-desc-more" class="intr f-brk" v-if="text_flag">
                  <b>介绍:</b>
                  {{ playlist ? spliceText : null }}
                  <br />
                </p>
                <p id="album-desc-more" class="intr f-brk" v-if="!text_flag">
                  <b>介绍:</b>
                  {{ playlist ? playlist.description : null }}
                  <br />
                </p>
                <div class="f-cb" v-if="text_slice">
                  <a
                    id="album-desc-spread"
                    href="javascript:;"
                    class="s-fc7 f-fr"
                    @click="text_flag = !text_flag"
                    >{{ text_flag ? "展开" : "关闭"
                    }}<i
                      :class="[
                        'u-icn',
                        { 'u-icn-69': text_flag },
                        { 'u-icn-70': !text_flag },
                      ]"
                    ></i
                  ></a>
                </div>
              </div>
            </div>
          </div>
          <!-- 歌曲列表 -->
          <playList
            :data='playlist'
          ></playList>
          <!-- 评论 -->
          <comment :id="commentIDS"></comment>
        </div>
      </div>
      <!-- 侧边栏 -->
      <songSidebar :song_id="songId" ></songSidebar>
    </div>
  </div>
</template>

<script>
// import QRcode from "../../../components/loging_box/login_com/QRcode.vue";
import playList from "./playList.vue";
import songSidebar from "./song_sidebar.vue";
import needLogin from './need_Login.vue'
import comment from "../../../components/comment/comment.vue";
import { formatDate } from "../../../components/tool/tool";
import { playlist_detail } from "../../../network/login";

export default {
  data() {
    return {
      playlist: null, //歌单总数据
      text_flag: false, //完整简介和部分简介切换
      text_slice: false, //展开收起按钮的切换
      songId: "", //歌单id
      playCount: null, //播放的次数
      trackCount :null, //歌单中歌曲的总数
      commentIDS: null, //评论
      loginFlag : true,
      viewFlag:true,
    };
  },
  components: {
     playList,
    comment,
    songSidebar,
    needLogin
  },
  methods: {
    retard(){
      this.viewFlag = false
      this.$nextTick(() => {
          this.viewFlag = true
      })
    },
    res_data(id) {
      //获取数据
      // this.playlist = null
      playlist_detail(id).then(
        (res) => {
          this.retard()
          this.playlist = res.data.playlist;
          if (res.data.playlist.description &&res.data.playlist.description.length > 120) {
            this.text_slice = true;
            this.text_flag = true;
          }
        },
        (err) => {
          console.log("歌单详情获取失败");
         
        }
      );
    },
    send_song(song_id) {
      //发送歌单id 播放音乐
      this.$store.dispatch("song_ct", song_id);
    },
    toUser(uid) {
      this.$router.push({ path: "/userHome", query: { id: uid } });
    },
  },
  computed: {
    spliceText() {
      return this.playlist.description.substr(
        0,
        this.playlist.description.length / 5
      );
    },
    transfromDate() {
      return formatDate(this.playlist.createTime);
    },
  },
  beforeRouteUpdate(to, from, next) {  //路由参数的变化
  this.playlist = null
    this.res_data(to.query.id);
    this.songId = to.query.id;
    this.commentIDS = { name: "歌单", id: to.query.id };
    next();
  },
  watch:{                   //用来监听登录 登陆成功后的操作
    '$store.state.userId' : function(){
            this.loginFlag = true
            this.res_data(this.$route.query.id);
             this.songId = this.$route.query.id;
             this.commentIDS = { name: "歌单", id: this.$route.query.id };
    }
  },
  created() {
    if(window.sessionStorage.needLogin_id){
        this.loginFlag = false
        sessionStorage.removeItem("needLogin_id");
        return
    }
    
    this.res_data(this.$route.query.id);
    this.songId = this.$route.query.id;
    this.commentIDS = { name: "歌单", id: this.$route.query.id };
  },
};
</script>

<style scoped>
@import url("./exhibition.css");
</style>